<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>欢迎注册</title>
    <link href="../css/register.css" rel="stylesheet">
</head>
<body>


<div class="form-div">
    <div class="reg-content">
        <h1>欢迎注册</h1>
        <span>已有账号？</span><a href="#">登录</a>
    </div>
    <form id="reg-form" action="#" method="post">
        <table>

            <tr>
                <td>用户名</td>
                <td class="inputs">
                    <input name="username" type="text" id="username">
                    <br>
                    <span id="username_err" class="err_msg" style="display: none">用户名不太受欢迎</span>
                </td>

            </tr>

            <tr>
                <td>密码</td>
                <td class="inputs">
                    <input name="password" type="password" id="password">
                    <br>
                    <span id="password_err" class="err_msg" style="display: none">密码格式有误</span>
                </td>
            </tr>

            <tr>
                <td>手机号</td>
                <td class="inputs">
                    <input name="tel" type="text" id="tel">
                    <br>
                    <span id="tel_err" class="err_msg" style="display: none">手机号格式有误</span>
                </td>
            </tr>

        </table>

        <div class="buttons">
            <input value="注册" type="submit" id="reg_btn">
        </div>
        <br class="clear">

    </form>
</div>
<script>


// 1. 验证用户名是否符合规则
// 1.1 获取用户名的输入框
var usernameInput = document.getElementById("username");

// 1.2 绑定onblur事件，失去焦点
usernameInput.onblur = checkUsername;

function checkUsername(){
    // 1.3 获取用户输入的用户名
    var username = usernameInput.value.trim();
    // 1.4 判断用户名是否符合规则 6-12位
    // var flag = username.length >= 6 && username.length <= 12;
    var reg = /^\w{6,12}$/;
    var flag = reg.test(username);
    if(flag){
        // 符合规则
        document.getElementById("username_err").style.display = "None";
    }else{
        // 不符合规则
        document.getElementById("username_err").style.display = "";
    }
    return flag;
}

   
// 1. 验证密码是否符合规则
// 1.1 获取密码的输入框
var passwordInput = document.getElementById("password");

// 1.2 绑定onblur事件，失去焦点
passwordInput.onblur = checkPassword;
function checkPassword(){
    // 1.3 获取用户输入的密码
    var password = passwordInput.value.trim();
    // 1.4 判断密码是否符合规则 6-12位
    var reg = /^\w{6,12}$/;
    var flag = reg.test(password);
    // var flag = password.length >= 6 && password.length <= 12;
    if(flag){
        // 符合规则
        document.getElementById("password_err").style.display = "None";
    }else{
        // 不符合规则
        document.getElementById("password_err").style.display = "";
    }
    return flag;
}


 
// 1. 验证手机号是否符合规则
// 1.1 获取手机号的输入框
var telInput = document.getElementById("tel");

// 1.2 绑定onblur事件，失去焦点
telInput.onblur = checkTel;
function checkTel(){
    // 1.3 获取用户输入的手机号
    var tel = telInput.value.trim();
    // 1.4 判断手机号是否符合规则 11 位: 长度为11，数字组成，1开头
    var reg = /^[1]\d{10}$/;
    var flag = reg.test(tel);
    // var flag = tel.length == 11;
    if(flag){
        // 符合规则
        document.getElementById("tel_err").style.display = "None";
    }else{
        // 不符合规则
        document.getElementById("tel_err").style.display = "";
    }
    return flag;
}


// 1. 获取表单项对象
var regForm = document.getElementById("reg-form");

// 2. 绑定onsubmit事件
regForm.onsubmit = function(){
    // 挨个判断每一个表单是否符合要求，如果有一个不符合，则返回false.
    var flag = checkUsername() && checkPassword() && checkTel();
    return flag;
}


</script>
</body>
</html>